<template>
  <v-card>
    <v-data-iterator
      :items="courseListStore.courseList"
      item-value="name"
      :page="page"
      :items-per-page="perpage"
      :search="search"
      filter-keys="name"
    >
      <template #header>
        <v-card class="text-h6 d-flex flex-row justify-space-between align-center mb-3" variant="flat" >
          <p class="px-5 text-primary">我的课程</p>
          <v-text-field
            max-width="300"
            v-model="search"
            label="搜索"
            placeholder="请输入课程名"
            prepend-inner-icon="mdi-magnify"
            variant="solo"
            flat
            hide-details>
          </v-text-field>
        </v-card>
        <v-divider thickness="3" color="primary"></v-divider>
      </template>

      <template #default="{ items }">
        <v-card
          v-for="item in items"
          :key="item.raw.name"
          class="my-1"
          variant="plain"
        >
        <v-card-title class="text-body-1">
          <v-icon color="primary" size="tiny" class="">mdi-circle-small</v-icon>{{item.raw.name}}
        </v-card-title>

        <v-card-subtitle class="w-100 text-body-2 d-flex justify-space-between aligen-md-center">
          <v-container class="px-0 py-0">
            <p>课程号: {{item.raw.id}}</p>
            <!-- <p>课序号: {{item.raw.course_number}} </p> -->
          </v-container>
          <v-btn @click="enterCourse(item.raw.id, item.raw.name)" color="primary"><v-icon>mdi-login</v-icon> 进入课程</v-btn>
        </v-card-subtitle>
        <v-divider thickness="3" ></v-divider>
        </v-card>

      </template>

      <template #footer>
        <v-divider thickness="3" color="primary"></v-divider>
        <v-card class="d-flex justify-center">

          <v-btn @click="prePage" variant="text">
            <v-icon size="large">mdi-menu-left</v-icon>
            <v-tooltip activator="parent">上一页</v-tooltip>
          </v-btn>

          <v-btn
            variant="text"
            @click="()=>{if(page!=1) page-=1;}"
            v-if="page!=1"
          > {{ page-1 }}
          </v-btn>
          <v-btn variant="text">
            <p class="text-h5 text-primary">
              {{ page }}
            </p>
          </v-btn>
          <v-btn
            variant="text"
           @click="()=>{
            if(page != Math.ceil(courseListStore.courseList.filter((item) => item.name.includes(search) ).length / perpage)) page+=1;
            }"
           v-if="page != Math.ceil(courseListStore.courseList.filter((item) => item.name.includes(search) ).length / perpage)"
           class="text-body-1"
           > {{ page + 1 }}
          </v-btn>
          <v-btn @click="nextPage" variant="text">
            <v-icon size="large">mdi-menu-right</v-icon>
            <v-tooltip activator="parent">下一页</v-tooltip>
          </v-btn>
        </v-card>
      </template>
    </v-data-iterator>

  </v-card>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { onBeforeMount, ref } from 'vue'
import { useCourseListStore } from '@/stores/course/courseList';
const courseListStore = useCourseListStore();
onBeforeMount(()=>{
  courseListStore.dispatchGetClassList();
})

const search = ref('')
const page = ref(1)
const perpage = ref(4)
function nextPage() {
  if (page.value < courseListStore.courseList.filter((item) => item.name.includes(search.value) ).length / perpage.value)
    page.value += 1
}

function prePage() {
  if (page.value > 1)
    page.value -= 1
}

const router = useRouter();

function enterCourse( course_id: number, course_name: string) {

  router.push({ name: 'CoursePage', params: { id: course_id }});
  const route = useRoute();
  route.meta.title = course_name;
  console.log(route.meta.title);
}


</script>
